import React, {Component} from 'react'
import {View, Text, ScrollView, StyleSheet, Image, Dimensions,TouchableOpacity} from 'react-native'
import LoadingCommon from '../common/loading_common'
import Icon from 'react-native-vector-icons/Ionicons'
import styles,{BLUE} from '../../config/styles'
var {height, width} = Dimensions.get('window')
import ScrollableTabView from 'react-native-scrollable-tab-view'
import { VictoryBar, VictoryChart, VictoryAxis, VictoryVoronoiContainer } from 'victory-native';
import NavigatorService from '../../config/navigate_service'
import LinearGradient from 'react-native-linear-gradient';





class classStaticsItem extends Component {

    constructor (props) {
        super(props)
        this.state = {
            loading: false
        }
    }

    componentDidMount () {
    }


    statics_chart = (data,arrayX) => {

        //const data = [
        //    {quarter: 1, earnings: 130},
        //    {quarter: 2, earnings: 165},
        //    {quarter: 3, earnings: 142},
        //    {quarter: 4, earnings: 190},
        //    {quarter: 5, earnings: 900}
        //];
        return(
            
            <VictoryChart
                // domainPadding will add space to each side of VictoryBar to
                // prevent it from overlapping the axis
                domainPadding={50}

            >
                <VictoryAxis
                    // tickValues specifies both the number of ticks and where
                    // they are placed on the axis
                    tickValues={[1, 2, 3, 4, 5]}
                    tickFormat={arrayX}
                />
                <VictoryAxis
                    dependentAxis
                    // tickFormat specifies how ticks should be displayed
                    tickFormat={(x) => (x)}
                />
                <VictoryBar
                    data={data}
                    style={{ data: { fill: "#5daeff", stroke: "#5daeff", strokeWidth: 2}}}
                    x="quarter"
                    y="earnings"
                    animate={{duration: 2000,onLoad: { duration: 1000 }
                                              }}
                    labels={(d) => `${d.y}`}
                />
            </VictoryChart>
        )
    }

    getData = () => {
    }

    render () {
        const classData = this.props.classStatic;
        let sumTimes = 0;
        let data = [];
        let arrayX = [];
        classData.error_phonograms.forEach((error_phonogram,index)=>{
            sumTimes +=error_phonogram.error_count;
            data.push({quarter: index+1, earnings: error_phonogram.error_count});
            arrayX.push(error_phonogram.phonogram_name);
        })

        if (this.state.loading) {
            return <LoadingCommon />
        } else {
            return (
                <View style={[styles.tab_box]}>
                    <View style={{flexDirection: 'row',borderBottomWidth: 1,borderBottomColor: '#eaeefe'}}>
                        <View style={{flex:1,paddingTop:23,paddingLeft:15}}><Text>{classData.name}</Text></View>
                        <View style={{paddingTop:15,paddingRight:15,paddingBottom:15}}>
                            <Text style={{color:'#999'}}>共 <Text style={{fontSize:16,color:BLUE}}>{classData.student_count}</Text> 位学生</Text>
                            <Text style={{color:'#999'}}>平均 <Text style={{fontSize:16,color:BLUE}}>{classData.avg_stars}</Text> 星</Text>
                        </View>
                    </View>
                    <View style={{flexDirection: 'row'}}>
                        <View style={{flex:1,padding:15}}><Text>高频率错字节统计</Text></View>
                        <View style={{paddingTop:15,paddingRight:15}}>
                            <Text>{sumTimes}次</Text>
                        </View>
                    </View>

                    <View style={{backgroundColor:'#eff6fa',marginLeft:10,marginRight:10,marginBottom:15}} pointerEvents="none">

                        {this.statics_chart(data,arrayX)}
                    </View>
                    <TouchableOpacity style={{alignItems: 'center',justifyContent: 'center',paddingBottom:15}}
                                      onPress={() => NavigatorService.navigate('symbol_show',{classId:classData.id})}>
                        <Text>查看详情 ></Text>
                    </TouchableOpacity>
                </View>
            )
        }

    }
}

export default classStaticsItem